<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <script src="js/request.js"></script>

    <style>
        .active{
            color: #7fb80e;
        }
        audio{
            width: 90%;
            margin-left: 5%;
            position: absolute;
            bottom: 10px;
        }
        #music_list{
            width: 90%;
            padding-bottom: 10px;
            height: 95%;
            overflow: scroll
        }

        li{
            padding-top: 25px;
        }
    </style>
</head>
<body bgcolor="#FFFFFF" style="height:90%">
<ol id="music_list"></ol>


<audio preload="auto" height="100px" autoplay controls id="audio_view"></audio>
<script>
    const audioView = document.querySelector("#audio_view");
    const musicListView = document.querySelector("#music_list");
    let musicList = [];

    let currentPosition = 0;

    function play(e) {
        playCurrent(e.dataset.position)
    }


    function parseResult(result) {
        let json;
        if (typeof result === 'string') {
            json = JSON.parse(result);
        } else {
            json = result;
        }
        // const json = JSON.parse(result);
        musicList = json;
        let string = "";
        for (let i = 0; i<json.length; ++i) {
            string += "<li src=\""+json[i].url ;
            string += "\" onclick=\"play(this)\" data-position="+i+">"+json[i].title+"<\/li>";
        }
        musicListView.innerHTML = string;


        audioView.src = musicList[0].url;
        musicListView.childNodes[0].classList.add("active")
    }

    function loadXMLDoc()
    {
        getRequest("/file/musicsJson", "", function (result) {
            parseResult(result)
        }, function (errorMsg) {
            musicListView.innerHTML = errorMsg;
        });
    }

    // loadXMLDoc();//加载远程数据

    // 本地测试数据
    parseResult("[" +
        "{\"url\":\"https://divaid.github.io/resources/musices/菊次郎的夏天.mp3\",\"type\":\"music\",\"title\":\"菊次郎的夏天.mp3\"}," +
        "{\"url\":\"./musics/儿时的夏日.mp3\",\"type\":\"music\",\"title\":\"儿时的夏日.mp3\"}," +
    "{\"url\":\"https://divaid.github.io/resources/musices/故宫的记忆.mp3\",\"type\":\"music\",\"title\":\"故宫的记忆.mp3\"}," +
    "{\"url\":\"./musics/秋天里的深蓝.mp3\",\"type\":\"musices\",\"title\":\"秋天里的深蓝.mp3\"}," +
    "{\"url\":\"https://divaid.github.io/resources/musices/俞灏明-爱的华尔兹.mp3\",\"type\":\"music\",\"title\":\"俞灏明-爱的华尔兹.mp3\"}," +
    "{\"url\":\"https://divaid.github.io/resources/musices/SongTaste-月下独酌.mp3\",\"type\":\"music\",\"title\":\"SongTaste-月下独酌.mp3\"}," +
    "{\"url\":\"https://divaid.github.io/resources/musices/梅雨西子-夜明.mp3\",\"type\":\"music\",\"title\":\"梅雨西子-夜明.mp3\"}," +
    "{\"url\":\"https://divaid.github.io/resources/musices/被遗弃的土豆-吹箫人去玉楼空.wav\",\"type\":\"music\",\"title\":\"被遗弃的土豆-吹箫人去玉楼空.wav\"}," +
    "{\"url\":\"https://divaid.github.io/resources/musices/晴天的周末在去学校的路上遇见喜欢的人.mp3\",\"type\":\"music\",\"title\":\"晴天的周末在去学校的路上遇见喜欢的人.mp3\"}," +
    "{\"url\":\"https://divaid.github.io/resources/musices/宗次郎-いつも何度でも.mp3\",\"type\":\"music\",\"title\":\"宗次郎-いつも何度でも.mp3\"}," +
    "{\"url\":\"https://divaid.github.io/resources/musices/ThePianoGuys-LoveStory.mp3\",\"type\":\"music\",\"title\":\"ThePianoGuys-LoveStory.mp3\"}," +
    "{\"url\":\"https://divaid.github.io/resources/musices/Hea2t-盛夏与蝉鸣.mp3\",\"type\":\"music\",\"title\":\"Hea2t-盛夏与蝉鸣.mp3\"}," +
    "{\"url\":\"https://divaid.github.io/resources/musices/卡农(钢琴曲).mp3\",\"type\":\"music\",\"title\":\"卡农(钢琴曲).mp3\"}," +
    "{\"url\":\"https://divaid.github.io/resources/musices/天箫吟唱-飞越彩虹.mp3\",\"type\":\"music\",\"title\":\"天箫吟唱-飞越彩虹.mp3\"}," +
    "{\"url\":\"https://divaid.github.io/resources/musices/宗次郎-故乡的原风景.mp3\",\"type\":\"music\",\"title\":\"宗次郎-故乡的原风景.mp3\"}" +

        "]");


    function playCurrent(position) {
        if (currentPosition === position) {
            return
        }

        audioView.src = musicList[position].url;


        musicListView.childNodes[currentPosition].classList.remove("active");
        currentPosition = parseInt(position);
        musicListView.childNodes[currentPosition].classList.add("active");
    }

    function playNext() {
        if (musicList.length <= (currentPosition + 1)) {
            playCurrent(0)
        } else
            playCurrent(currentPosition + 1)
    }

    audioView.onended = function(){
        playNext();
    }
</script>

<!-- <script type="text/javascript" src="./js/getRequest.js"></script>
<script type="text/javascript">
    getRequest("http://load_star.gitee.io/htmlminifuncs/jsondata/musices", "", function(res){
        // console.log(JSON.parse(res).data)
        parseResult(JSON.parse(res).data)
    })
</script> -->
</body>
</html>
